<!doctype html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>鱼类体长预测 - 智能水产养殖系统</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.1/font/bootstrap-icons.css" rel="stylesheet">
</head>
<body class="bg-light">

<div class="container py-4">
    <div class="row mb-4">
        <div class="col-12">
            <h2 class="text-info">
                <i class="bi bi-rulers"></i> 鱼类体长预测
            </h2>
            <p class="text-muted">基于机器学习算法，根据鱼类体重预测其体长</p>
        </div>
    </div>

    <div class="row">
        <div class="col-md-6">
            <div class="card shadow">
                <div class="card-header bg-info text-white">
                    <h5 class="mb-0">
                        <i class="bi bi-calculator"></i> 体长预测工具
                    </h5>
                </div>
                <div class="card-body">
                    <form id="prediction-form">
                        <div class="mb-3">
                            <label for="species" class="form-label">鱼类品种</label>
                            <select class="form-select" id="species" name="species" required>
                                <option value="Bream">Bream (鲤科)</option>
                                <option value="Roach">Roach (拟鲤)</option>
                                <option value="Whitefish">Whitefish (白鱼)</option>
                                <option value="Parkki">Parkki (鲈鱼)</option>
                                <option value="Perch">Perch (鲈鱼)</option>
                                <option value="Pike">Pike (梭子鱼)</option>
                                <option value="Smelt">Smelt (胡瓜鱼)</option>
                            </select>
                        </div>
                        
                        <div class="mb-3">
                            <label for="weight" class="form-label">体重 (克)</label>
                            <input type="number" step="0.1" class="form-control" id="weight" name="weight" 
                                   placeholder="请输入鱼类体重" required>
                            <div class="form-text">请输入0-2000克之间的数值</div>
                        </div>
                        
                        <button type="submit" class="btn btn-info w-100">
                            <i class="bi bi-calculator"></i> 开始预测
                        </button>
                    </form>
                </div>
            </div>

            <!-- 预测结果 -->
            <div class="card shadow mt-3" id="result-card" style="display: none;">
                <div class="card-header bg-success text-white">
                    <h5 class="mb-0">
                        <i class="bi bi-check-circle"></i> 预测结果
                    </h5>
                </div>
                <div class="card-body">
                    <div id="prediction-result"></div>
                </div>
            </div>
        </div>

        <div class="col-md-6">
            <div class="card shadow">
                <div class="card-header bg-primary text-white">
                    <h5 class="mb-0">
                        <i class="bi bi-info-circle"></i> 预测说明
                    </h5>
                </div>
                <div class="card-body">
                    <div class="alert alert-info">
                        <h6><i class="bi bi-lightbulb"></i> 预测原理</h6>
                        <p>本系统使用线性回归算法，基于历史数据中体重与体长的相关性进行预测。预测结果仅供参考，实际体长可能因个体差异而有所不同。</p>
                    </div>
                    
                    <div class="alert alert-warning">
                        <h6><i class="bi bi-exclamation-triangle"></i> 使用注意</h6>
                        <ul class="mb-0">
                            <li>输入体重应在合理范围内（0-2000克）</li>
                            <li>不同品种的鱼类体型特征不同</li>
                            <li>预测结果基于统计模型，存在一定误差</li>
                            <li>建议结合实际情况进行判断</li>
                        </ul>
                    </div>

                    <div class="alert alert-success">
                        <h6><i class="bi bi-graph-up"></i> 数据来源</h6>
                        <p>预测模型基于Fish.csv数据集训练，包含多种鱼类的体重和体长数据，确保预测的准确性。</p>
                    </div>
                </div>
            </div>

            <!-- 品种信息 -->
            <div class="card shadow mt-3">
                <div class="card-header bg-secondary text-white">
                    <h5 class="mb-0">
                        <i class="bi bi-fish"></i> 品种信息
                    </h5>
                </div>
                <div class="card-body">
                    <div class="table-responsive">
                        <table class="table table-sm">
                            <thead>
                                <tr>
                                    <th>品种</th>
                                    <th>平均体重</th>
                                    <th>平均体长</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td>Bream</td>
                                    <td>626.0g</td>
                                    <td>32.0cm</td>
                                </tr>
                                <tr>
                                    <td>Roach</td>
                                    <td>152.0g</td>
                                    <td>20.5cm</td>
                                </tr>
                                <tr>
                                    <td>Whitefish</td>
                                    <td>531.0g</td>
                                    <td>28.7cm</td>
                                </tr>
                                <tr>
                                    <td>Parkki</td>
                                    <td>154.0g</td>
                                    <td>21.0cm</td>
                                </tr>
                                <tr>
                                    <td>Perch</td>
                                    <td>382.0g</td>
                                    <td>25.3cm</td>
                                </tr>
                                <tr>
                                    <td>Pike</td>
                                    <td>718.0g</td>
                                    <td>35.0cm</td>
                                </tr>
                                <tr>
                                    <td>Smelt</td>
                                    <td>11.2g</td>
                                    <td>9.8cm</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="row mt-4">
        <div class="col-12 text-center">
            <a href="{{ url_for('user_home') }}" class="btn btn-secondary">
                <i class="bi bi-arrow-left"></i> 返回主页
            </a>
        </div>
    </div>
</div>

<script>
document.getElementById('prediction-form').addEventListener('submit', function(e) {
    e.preventDefault();
    
    const formData = new FormData(this);
    const data = {
        weight: formData.get('weight'),
        species: formData.get('species')
    };
    
    // 显示加载状态
    const submitBtn = this.querySelector('button[type="submit"]');
    const originalText = submitBtn.innerHTML;
    submitBtn.innerHTML = '<i class="bi bi-hourglass-split"></i> 预测中...';
    submitBtn.disabled = true;
    
    fetch('/fish_prediction', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/x-www-form-urlencoded',
        },
        body: `weight=${data.weight}&species=${data.species}`
    })
    .then(response => response.json())
    .then(result => {
        const resultCard = document.getElementById('result-card');
        const resultDiv = document.getElementById('prediction-result');
        
        if (result.error) {
            resultDiv.innerHTML = `
                <div class="alert alert-danger">
                    <i class="bi bi-exclamation-triangle"></i> ${result.error}
                </div>
            `;
        } else {
            resultDiv.innerHTML = `
                <div class="row">
                    <div class="col-md-6">
                        <div class="text-center">
                            <h6 class="text-muted">输入体重</h6>
                            <h4 class="text-primary">${result.weight}g</h4>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="text-center">
                            <h6 class="text-muted">预测体长</h6>
                            <h4 class="text-success">${result.predicted_length}cm</h4>
                        </div>
                    </div>
                </div>
                <hr>
                <div class="alert alert-success">
                    <i class="bi bi-check-circle"></i> ${result.message}
                </div>
                <div class="text-center">
                    <small class="text-muted">品种：${result.species}</small>
                </div>
            `;
        }
        
        resultCard.style.display = 'block';
        resultCard.scrollIntoView({ behavior: 'smooth' });
    })
    .catch(error => {
        console.error('Error:', error);
        const resultCard = document.getElementById('result-card');
        const resultDiv = document.getElementById('prediction-result');
        
        resultDiv.innerHTML = `
            <div class="alert alert-danger">
                <i class="bi bi-exclamation-triangle"></i> 预测失败，请稍后重试
            </div>
        `;
        resultCard.style.display = 'block';
    })
    .finally(() => {
        submitBtn.innerHTML = originalText;
        submitBtn.disabled = false;
    });
});
</script>

</body>
</html> 